<!--
 * @description: 
 * @Date: 2022-10-15 19:34:07
 * @LastEditTime: 2022-10-27 23:44:05
-->
<template>
  <el-drawer v-model="drawer" :lock-scroll="true" custom-class="controller" :size="isMobile ? '340px' : '480px'"
    :with-header="false">
    <div class="control-model">
      <div class="select-none control-menu flex-shrink-0">
        <div style="width: 100%;height:100px">
          <img src="@/assets/img/favicon.png" class="select-none m-auto pt-5" />
        </div>
        <div class="">
          <transition v-for="(item, index) in menu">
            <controlMenu :data="item" @click="select(item)" :class="open.name == item.name ? 'selectControl' : ''">
            </controlMenu>
          </transition>
        </div>
      </div>
      <div class="control-setting select-none">
        <div class="control-setting-top p-3 pt-5">
          <span class="text-2xl">{{ open.name }}</span>
          <p class="text-sm mt-2">{{ open.tips }}</p>
        </div>
        <div class="control-box">
          <component :is="open.url"></component>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script  setup>
import { defineAsyncComponent, shallowRef, ref } from 'vue'
import emitter from "@/util/emitter";
import { useStore } from "vuex"
import controlMenu from "./control-menu.vue"
import openType from "@/assets/svg/openType.svg"
import theme from "@/assets/svg/theme.svg"
import about from "@/assets/svg/about.svg"
import cover from "@/assets/svg/cover.svg"
import appicon from "@/assets/svg/app.svg"
const isMobile = window.isMobile
const menu = [
  {
    name: '个人中心',
    tips: '个人信息管理',
    icon: cover,
    url: defineAsyncComponent(() => import("./menu/user.vue"))
  },
  {
    name: '添加应用',
    tips: '添加站内快捷应用',
    icon: appicon,
    url: defineAsyncComponent(() => import("./menu/addComponent.vue"))
  },
  {
    name: '打开方式',
    tips: '搜索和标签打开方式',
    icon: openType,
    url: defineAsyncComponent(() => import("./menu/openType.vue"))
  },
  {
    name: '主题壁纸',
    tips: '主题自定义美化',
    icon: theme,
    url: defineAsyncComponent(() => import("./menu/theme.vue"))
  },
  {
    name: '关于',
    tips: '关于我们,产品反馈',
    icon: about,
    url: defineAsyncComponent(() => import("./menu/about.vue"))
  }
]
const open = shallowRef(menu[0])

const select = (item) => {
  open.value = item
}

const store = useStore()
const drawer = ref(false)
const openController = (e = true) => {
  drawer.value = e;
}
emitter.on("openController", openController)

</script>
<style lang="less">
.selectControl {
  background-color: #DBEAFE !important;
  color: #3B82F6 !important;
}

.controller {
  z-index: 201;
  min-width: 340px;
  border-bottom-left-radius: 10px;
  background-color:#fff;
  transform: translateZ(0);

  >.el-drawer__body {
    padding: 0px !important;
    height: 100%;
  }

  .control-model {
    display: flex;
    height: 100%;

    .control-menu {
      min-width: 72px;
      max-width: 140px;
      height: calc(100%);
    }

    .control-setting {
      flex: 1;
      height: 100%;

      .control-setting-top {
        width: 100%;
        height: 100px;
      }

      .control-box {
        border-radius: 10px 0px 0px 0px;
        background-color: #f7f7f7;
        width: 100%;
        height: calc(100% - 100px);
        padding: 10px;
      }
    }
  }


}
</style>